<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<link rel="stylesheet" type="text/css" href="../../admin/easyui/easyui/1.3.4/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="../../admin/easyui/css/wu.css" />
	<link rel="stylesheet" type="text/css" href="../../admin/easyui/css/icon.css" />
	<script type="text/javascript" src="../../admin/easyui/js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../../admin/easyui/easyui/1.3.4/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../admin/easyui/easyui/1.3.4/locale/easyui-lang-zh_CN.js"></script>
</head>

<body class="easyui-layout">
    <div class="easyui-layout" data-options="fit:true">
        <!-- Begin of toolbar -->
        <div id="wu-toolbar"><h2>楼层列表</h2>
            <div class="wu-toolbar-button">
                <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAddMenu()"
				plain="true">添加</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-bullet-edit" onclick="openEdit()"
				plain="true">编辑</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="remove()"
				plain="true">删除</a>
            </div>
            <div class="wu-toolbar-search">
                <label>楼层名称:</label><input id="search-name" class="wu-text" style="width:100px">
                
                <a href="#" id="search-btn" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
            </div>
        </div>
        <!-- End of toolbar -->
        <table id="data-datagrid" class="easyui-datagrid" toolbar="#wu-toolbar">
            <tbody>
                <tr>
                    <td>1</td>
                    <td>1楼</td>
                    <td>1楼的逃生通道有点阻塞。</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>2楼</td>
                    <td>2楼监控坏了</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- 添加弹框 -->
    <div id="add-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:420px; padding:10px;">
        <form id="add-form" method="post">
            <table>
                <tr>
                    <td align="right">楼层名称:</td>
                    <td><input type="text" id="add-name" name="name" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写楼层名称'" /></td>
                </tr>
                <tr>
                    <td align="right">楼层备注:</td>
                    <td><textarea id="add-remark" name="remark" rows="6" class="wu-textarea" style="width:260px"></textarea></td>
                </tr>
            </table>
        </form>
    </div>
    <!-- 修改窗口 -->
    <div id="edit-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:450px; padding:10px;">
        <form id="edit-form" method="post">
            <input type="hidden" name="id" id="edit-id">
            <table>
               <tr>
                    <td align="right">楼层名称:</td>
                    <td><input type="text" id="edit-name" name="name" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写楼层名称'" /></td>
                </tr>
                <tr>
                    <td align="right">楼层备注:</td>
                    <td><textarea id="edit-remark" name="remark" rows="6" class="wu-textarea" style="width:260px"></textarea></td>
                </tr>
            </table>
        </form>
    </div>

    
    <!-- End of easyui-dialog -->
    <script type="text/javascript">
        
        
        
        /**
        *  添加记录
        */
        function add(){
            var validate = $("#add-form").form("validate");
            if(!validate){
                $.messager.alert("消息提醒","请检查你输入的数据!","warning");
                return;
            }
            var data = $("#add-form").serialize();
            $.ajax({
                url:'add',
                dataType:'json',
                type:'post',
                data:data,
                success:function(data){
                    if(data.type == 'success'){
                        $.messager.alert('信息提示','添加成功！','info');
                        $("#add-name").val('');
                        $("#add-remark").val('');
                        $('#add-dialog').dialog('close');
                        $('#data-datagrid').datagrid('reload');
                    }else{
                        $.messager.alert('信息提示',data.msg,'warning');
                    }
                }
            });
        }
        
        /**
        * 编辑记录
        */
        function edit(){
            var validate = $("#edit-form").form("validate");
            if(!validate){
                $.messager.alert("消息提醒","请检查你输入的数据!","warning");
                return;
            }
            var data = $("#edit-form").serialize();
            $.ajax({
                url:'edit',
                dataType:'json',
                type:'post',
                data:data,
                success:function(data){
                    if(data.type == 'success'){
                        $.messager.alert('信息提示','修改成功！','info');
                        $('#edit-dialog').dialog('close');
                        $('#data-datagrid').datagrid('reload');
                    }else{
                        $.messager.alert('信息提示',data.msg,'warning');
                    }
                }
            });
        }
        
        
        /**
        * 删除记录
        */
        function remove(){
            $.messager.confirm('信息提示','确定要删除该记录？', function(result){
                if(result){
                    var item = $('#data-datagrid').datagrid('getSelected');
                    if(item == null || item.length == 0){
                        $.messager.alert('信息提示','请选择要删除的数据！','info');
                        return;
                    }
                    
                    $.ajax({
                        url:'delete',
                        dataType:'json',
                        type:'post',
                        data:{id:item.id},
                        success:function(data){
                            if(data.type == 'success'){
                                $.messager.alert('信息提示','删除成功！','info');
                                $('#data-datagrid').datagrid('reload');
                            }else{
                                $.messager.alert('信息提示',data.msg,'warning');
                            }
                        }
                    });
                }	
            });
        }
        
        /**
        * Name 打开编辑窗口
        */
        function openEdit(){
            //$('#add-form').form('clear');
            var item = $('#data-datagrid').datagrid('getSelected');
            if(item == null || item.length == 0){
                $.messager.alert('信息提示','请选择要编辑的数据！','info');
                return;
            }
            $('#edit-dialog').dialog({
                closed: false,
                modal:true,
                title: "编辑楼层信息",
                buttons: [{
                    text: '确定',
                    iconCls: 'icon-ok',
                    handler: edit
                }, {
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        $('#edit-dialog').dialog('close');                    
                    }
                }],
                onBeforeOpen:function(){
                    //$("#add-form input").val('');
                    $("#edit-id").val(item.id);
                    $("#edit-name").val(item.name);
                    $("#edit-remark").val(item.remark);
                }
            });
        }
        
        /**
        * Name 打开添加窗口
        */
        function openAdd(){
            //$('#add-form').form('clear');
            $('#add-dialog').dialog({
                closed: false,
                modal:true,
                title: "添加楼层信息",
                buttons: [{
                    text: '确定',
                    iconCls: 'icon-ok',
                    handler: add
                }, {
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        $('#add-dialog').dialog('close');                    
                    }
                }],
                onBeforeOpen:function(){
                    //$("#add-form input").val('');
                    
                }
            });
        }
        
        //搜索按钮监听
        $("#search-btn").click(function(){
            var option = {name:$("#search-name").val()};
            $('#data-datagrid').datagrid('reload',option);
        });
        
        
        /** 
        * 载入数据
        */
        $('#data-datagrid').datagrid({
            url:'list',
            rownumbers:true,
            singleSelect:true,
            pageSize:20,           
            pagination:true,
            multiSort:true,
            fitColumns:true,
            idField:'id',
            treeField:'name',
            fit:true,
            columns:[[
                { field:'chk',checkbox:true},
                { field:'name',title:'楼层名称',width:100,sortable:true},
                { field:'remark',title:'楼层备注',width:200},
            ]]
        });
    </script>
    
</body>
</html>